<template>
  <!--   主内容   -->
  <div class="xqx-el-main">
    <div class="xqx-zone">
      <div class="xqx-nav">
        <a href="/" class="xqx-mini-nav">首页</a>
        <span class="xqx-mini-nav xqx-span">·</span>
        <a href="/" class="xqx-mini-nav">租车</a>
        <span class="xqx-mini-nav xqx-span">·</span>
        <a href="/" class="xqx-mini-nav">租车资讯</a>
      </div>

      <div class="xqxnews-main">
        <!--    控制靠左    -->
        <div class="xqx-left">
          <div class="xqx-left-border">
            <div class="xqx-zxheader">
              <h1 class="xqx-zixunheader">{{categoryName}}</h1>
            </div>
            <div class="xqx-listall">
              <router-link :to="'/newsDetail/' + item.id" v-for="item in newsList" class="news-item">
                <span class="p">{{ item.title }}</span>
                <span class="dot"></span>[查看]
              </router-link>
            </div>
            <div class="xqx-pagination-div">
              <el-pagination style="float: right;padding-right:8px;" background layout="prev, pager, next"
                             :total="total"
                             v-model:current-page="queryParams.pageNum"
                             v-model:page-size="queryParams.pageSize"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
              />
            </div>

          </div>
        </div>

        <div class="xqx-picmain-right">
          <div class="xqx-rent-nav-panel">
            <div class="xqx-right-top">
              <a href="#"><img src="https://www.atzuche.com/static/media/bg1.31cab0d8.jpg" alt="图片不见啦!"
                               style="width: 360px;height: 130px;"></a>
            </div>
            <div class="right-2left" style="float: left">
              <a href="#"><img src="https://www.atzuche.com/static/media/bg2.356c917a.jpg" alt="图片不见啦!"
                               style="width: 172.781px;height: 160px"></a>
            </div>
            <div class="right-2right" style="float: right">
              <a href="#"><img src="https://www.atzuche.com/static/media/bg3.7bdecb2e.jpg" alt="图片不见啦!"
                               style="width: 172.781px;height: 160px"></a>
            </div>
          </div>

          <div class="xqx-news-panel">
            <div class="xqx-24h" style="width: 318.4px;height: 20px;margin-bottom: 20px">
              <h2 style="float: left;font-size: 20px;margin:0;">最新文章</h2>
              <img style="width: 25px;height: 10px;float: left;margin-top:5px;margin-left: 5px;" src="" alt="">
            </div>
            <router-link :to="'/newsDetail/' + item.id" v-for="item in latestNews" class="news-item">
              <span class="p">{{ item.title }}</span>
              <span class="dot"></span>[查看]
            </router-link>
          </div>

          <div class="xqx-news-panel">
            <div class="xqx-hotarticle" style="width: 318.4px;height: 20px;margin-bottom: 20px">
              <h2 style="float: left;font-size: 20px;margin:0;">热点文章</h2>
              <img style="width: 25px;height: 10px;float: left;margin-top:5px;margin-left: 5px;" src="" alt="">
            </div>
            <router-link :to="'/newsDetail/' + item.id" v-for="item in hotNews" class="news-item">
              <span class="p">{{ item.title }}</span>
              <span class="dot"></span>[查看]
            </router-link>
          </div>
        </div>
      </div>
      <div class="xqx-recommend-car">
        <div class="similarity">
          <h2 class="xqx-word">相似推荐</h2>
        </div>
        <div class="xqx-carpiclist">
          <div class="xqx-car-card card">
            <div class="xqx-img">
              <a href="" class="xqx-change"><img class="xqx-car-img"
                                                 src="https://carphoto.atzuche.com/2car/15/12/449748502/1450509991845.jpg"
                                                 alt="找不到图片啦!"></a>
            </div>
            <div class="xqx-info-border">
              <div class="xqx-info-one">
                <a href="#" class="xqx-card-info">现代 索纳塔八 2.4L 自动挡</a>
              </div>
              <div class="xqx-info-two">
                <span class="xqx-code">沪A***99 </span>
                <span class="xqx-score">5.0分</span>
              </div>
              <div class="xqx-carprice">
                <p class="xqx-p">
                  <span class="xqx-num">216</span>
                  <span class="xqx-unit">元/天</span></p>
              </div>
            </div>
          </div>

          <div class="xqx-car-card card">
            <div class="xqx-img">
              <a href=""><img class="xqx-car-img"
                              src="https://carphoto.atzuche.com/2car/16/09/335905075/1473760147851.jpg"
                              alt="找不到图片啦!"></a>
            </div>
            <div class="xqx-info-border">
              <div class="xqx-info-one">
                <a href="#" class="xqx-card-info">奥迪 A3 1.4T 自动挡</a>
              </div>
              <div class="xqx-info-two">
                <span class="xqx-code">沪B***N8 </span>
                <span class="xqx-score">4.5分</span>
              </div>
              <div class="xqx-carprice">
                <p class="xqx-p">
                  <span class="xqx-num">104</span>
                  <span class="xqx-unit">元/天</span></p>
              </div>
            </div>
          </div>

          <div class="xqx-car-card card">
            <div class="xqx-img">
              <a href=""><img class="xqx-car-img"
                              src="https://carphoto.atzuche.com/2car/18/04/409431689/1524559092815_3.jpg"
                              alt="找不到图片啦!"></a>
            </div>
            <div class="xqx-info-border">
              <div class="xqx-info-one">
                <a href="#" class="xqx-card-info">奔驰 C级 1.6T 自动挡</a>
              </div>
              <div class="xqx-info-two">
                <span class="xqx-code">沪D***73 </span>
                <span class="xqx-score">5.0分</span>
              </div>
              <div class="xqx-carprice">
                <p class="xqx-p">
                  <span class="xqx-num">190</span>
                  <span class="xqx-unit">元/天</span></p>
              </div>
            </div>
          </div>

          <div class="xqx-car-card card">
            <div class="xqx-img">
              <a href=""><img class="xqx-car-img"
                              src="https://carphoto.atzuche.com/2car/14/09/325390444/1417765720677.jpg"
                              alt="找不到图片啦!"></a>
            </div>
            <div class="xqx-info-border">
              <div class="xqx-info-one">
                <a href="#" class="xqx-card-info">大众 POLO GTI 1.4T 自动挡</a>
              </div>
              <div class="xqx-info-two">
                <span class="xqx-code">粤B***Y7 </span>
                <span class="xqx-score">5.0分</span>
              </div>
              <div class="xqx-carprice">
                <p class="xqx-p">
                  <span class="xqx-num">110</span>
                  <span class="xqx-unit">元/天</span></p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>


<script setup>

import {onMounted, ref} from "vue";
import request from '@/utils/request';
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router";


//资讯类别列表
const newsList = ref([]);

//24小时文章
const latestNews = ref([]);

//热点文章
const hotNews = ref([]);

//类别名称
let categoryName = ref("");

//分页总条数
const total = ref(0);
//查询条件
const queryParams = ref({id:undefined,pageNum: 1, pageSize: 10})




// 类别转换-----------------------------------------
const id2name = (id) => {
  switch (id) {
    case 0:
      categoryName.value = "全部资讯";
      break;
    case 1:
      categoryName.value = "租车注意";
      break;
    case 2:
      categoryName.value = "商务租车";
      break;
    case 3:
      categoryName.value = "新手须知";
      break;
    case 4:
      categoryName.value = "租车公司";
      break;
    case 5:
      categoryName.value = "租车流程";
      break;
    case 6:
      categoryName.value = "租车平台";
      break;
    default:
      categoryName.value = "搜索资讯";
  }
};


//最新文章------------------------------------------
const getNews = () => {
  let url = `/v1/news/latestNews`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      console.log(response.data);
      latestNews.value = response.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};

//热点文章-----------------------------------------
const getHotNews = () => {
  let url = `/v1/news/hot`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      console.log(response.data);
      hotNews.value = response.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};

//分页----------------------------
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  getNewsBySearch();
}

//分页按钮改变-----------------------
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  getNewsBySearch();
}

//资讯查询分类id
const id = ref(null);

const route = useRoute();
//资讯列表查询-----------------------------------------
const getNewsBySearch = () => {
  if (!route.params.id || isNaN(route.params.id) || route.params.id < 0) {
    id.value= 0;
    queryParams.value.id = 0;
  }else {
    id.value= route.params.id;
    queryParams.value.id = route.params.id;
  }

  let url = `/v1/news/searchBy`;
  request.get(url, {params: queryParams.value})
      .then((response) => {
        if (response.code === 200) {
          total.value = response.data.total;
          newsList.value = response.data.list;
          if (total.value == 0) {
            categoryName.value = "暂无相关资讯..."
          }
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}




onMounted(() => {
  //设置查询的参数
  getNewsBySearch();
  //id没有就返回0 代表查询全部 转名字为 全部资讯
  id2name(parseInt(id.value) ?? 0);
  getNews();
  getHotNews();
});




</script>




<style scoped>
.xqx-el-main {
  width: 1024px;
  margin: 0 auto;
}

.xqx-zone {
  width: 1024px;
  height: 1274px;
}

.xqx-nav {
  float: left;
  font-size: 12px;
  margin-bottom: 20px;
  width: 1024px;
  height: 18px;
}

.xqx-mini-nav {
  float: left;
  text-decoration: none;
  color: #999999;
}

.xqxnews-main {
  width: 1024px;
  height: 846px;
  margin-bottom: 40px;
}

.xqx-left {
  width: 602px;
  height: 755px;
  float: left;
}

.xqx-left-border {
  width: 602px;
  height: 775px;
  padding: 20px;
  border: 1.5px solid #f0f0f0;
  border-radius: 6px;
}

.xqx-zxheader {
  width: 602px;
  height: 30px;
  margin-bottom: 20px;
}

.xqx-zixunheader {
  float: left;
  font-size: 20px;
  color: #333333;
  margin: 0;
}

.xqx-listall {
  width: 602px;
  height: 645px;
}

.xqx-span {
  padding: 0 5px;
}

.xqx-pagination-div {
  float: right;
  width: 602px;
  height: 40px;
  margin-top: 20px;
}

.xqx-picmain-right {
  width: 360px;
  height: 850px;
  float: right;
}

.xqx-rent-nav-panel {
  width: 360px;
  height: 302px;
  margin: 0 0 20px;
}

.xqx-right-top {
  width: 360px;
  height: 130px;
  margin: 0 0 12px;
}

.xqx-info-one {
  width: 232px;
  height: 22.5px;
  /*border: 0.8px solid blueviolet;*/
  margin-bottom: 5px;
}

.xqx-info-two {
  width: 232px;
  height: 18px;
  /*border: 1px solid red;*/
  margin-bottom: 13px;
}

.xqx-info-two > .xqx-code {
  font-size: 12px;
  float: left;
}

.xqx-score {
  font-size: 12px;
  float: left;
  margin-left: 5px;
  color: #ff4949;
}

.xqx-p {
  margin: 0;
  font-size: 12px
}

.xqx-num {
  font-size: 18px;
  font-weight: bold;
  color: #ff4949;
  float: left;
}

.xqx-unit {
  float: left;
  color: #ff4949;
  margin-top: 2px;
}

.xqx-card-info {
  float: left;
  text-decoration: none;
  color: #333;
  font-size: 15px;
  font-weight: bold;
}

.xqx-card-info:hover {
  color: #00bc93;
}

.xqx-carprice {
  width: 232px;
  height: 27px;
  /*border: 1px solid red;*/
}

.xqx-news-panel {
  margin: 0 0 20px;
  padding: 20px;
  width: 318.4px;
  height: 200px;
  border: 1.5px solid #f0f0f0;
  border-radius: 6px;
}

.xqx-recommend-car {
  width: 1024px;
  height: 350px;
  /*border: 1px solid chartreuse;*/
}

.xqx-recommend-car > .similarity {
  width: 1024px;
  height: 30px;
  /*border: 0.8px solid red;*/
  margin-bottom: 20px;
}

.xqx-word {
  font-size: 20px;
  margin: 0;
  float: left;
}

.xqx-carpiclist {
  width: 1039px;
  height: 300px;
  /*border: 1px solid #0aa1ed;*/
  margin-right: -15px;
}

.xqx-car-card {
  width: 244px;
  height: 300px;
  /*border: 1px solid red;*/
  margin-right: 15px;
  float: left;
}

.xqx-img {
  width: 244px;
  height: 172px;
  transition: 0.2s;
}

.xqx-img:hover {
  transform: scale(1.02);
}

.xqx-car-img {
  width: 244px;
  height: 172px;
  float: left;
  border-radius: 5px;
}

.xqx-info-border {
  height: 110px;
  width: 232px;
  padding: 6px;
}


a.news-item:hover {
  color: #00bc93;
}

a.news-item {
  display: -ms-flexbox;
  display: flex;
  color: #666;
  font-size: 12px;
  margin-bottom: 15px;
  background: url() 0 no-repeat;
  background-size: 4px auto;
  padding-left: 10px;
  text-decoration: none;
}

a.news-item .dot {
  display: block;
  width: 100%;
  -ms-flex: 1 1;
  flex: 1 1;
  background: url() 0 repeat-x;
  background-size: 4px auto;
  margin: 0 10px;
}

a.news-item .p {
  overflow: hidden;
  white-space: nowrap;
  max-width: 80%;
}
</style>

<style>
.xqx-pagination-div .el-pagination.is-background .btn-next.is-active,
.xqx-pagination-div .el-pagination.is-background .btn-prev.is-active,
.xqx-pagination-div .el-pagination.is-background .el-pager li.is-active {
  background-color: #00bc93;
}
</style>
